<template>
  <div class="c-bg-sgray c-pt24 c-minh100vh">
    <!-- 答主回答弹窗 -->
    <cj-popup v-if="showAnswerModal" v-model="showAnswerModal" round position="bottom" closeable :closeIconStyle="'font-size: 0.5rem; color: #999;padding-top:0.65rem'" :closeIcon="'icon-guanbi'" @close="closeAnswerModal">
      <div class="c-p c-flex-row c-justify-center c-aligni-center">
        <my-small-tabbar class="c-w80" :tabList="tabMediaList" :tabIndex="modalType" @changeTab="changeModalType" :styleType="2" :flexClass2="'c-justify-center c-w33 c-mr0i'"></my-small-tabbar>
      </div>
      <div class="c-bg-sgray c-ph24 c-pt24" :class="modalType !=2?'c-pb120':' c-pb24'">
        <div class="c-bg-white c-pv24 c-ph20 c-p c-br20 c-text-hidden">
          <!-- 回答图文 -->
          <div v-show="modalType == 1">
            <div class="c-pv24 c-ph24 c-bg-sgray c-br20 c-text-hidden">
              <textarea @blur="blurInput" @focus="focusTextarea" v-model="answerText" :maxlength="1024" class="needsclick inputArea c-br10 c-hh190 c-w100" placeholder="输入您的答案或者相关文本内容"></textarea>
              <div class="c-p">
                <div class="c-w100 c-lh c-pt10 c-pb10 c-fs24 c-fc-sgray">{{answerText.length}}/1024</div>
                <div class="c-hh60 c-ww60 c-br30 c-bg-white c-flex-row c-flex-center c-pa c-p-r0 c-p-b0" @click="clickChoosePic" v-if="uploadImgList.length < 9">
                  <i class="iconfont c-fs32 theme-fc">&#xe97d;</i>
                  <input class="c-pa c-opacity0 c-p-t0 c-p-l0 c-fs10" v-if="!isWeiXin" id="uploadImg" ref="uploadImg" name="file" type="file" accept="image/*" @change="clickChoosePic($event)" />
                </div>
              </div>
            </div>
            <div class="c-flex-row c-flexw-wrap">
              <div class="c-mt24" :class="(index + 1) % 4 == 0 ? '' : 'c-mr20'" v-for="(item,index) in uploadImgList" :key="index">
                <div class="c-ww120 c-hh120 c-flex-row c-flex-center c-p">
                  <div @click="delUploadImage(index)" v-show="item != 'uploadQaImg'" class="upload-img-del c-fs24 c-bg-white c-fc-FF4A35 c-pz100 c-brp50 c-flex-row c-flex-center"><i class="iconfont">&#xe6ec;</i></div>
                  <img @click="clickPreviewImage(item,uploadImgList)" v-if="item != 'uploadQaImg'" class="c-w100 c-h c-br10" :src="$addXossFilter(item)" alt="" />
                </div>
              </div>
            </div>
          </div>
          <!-- 回答语音 -->
          <div v-show="modalType == 2" class="c-pv56">
            <div class="c-fs24 c-fc-gray c-textAlign-c">
              <div v-show="recordStatus == 'RECORD_START'">点击开始录音</div>
              <div v-show="recordStatus == 'RECORD_END'">本次录音共<span class="c-fc-FF5D3D">{{recordTime}}s</span></div>
            </div>
            <div class="c-flex-column c-flex-center c-mt48">
              <div @click="clickStartRecord" v-show="recordStatus == 'RECORD_START'" class="c-ww140 c-hh140 c-brp50 c-bg-FF5D3D c-flex-row c-flex-center iconfont c-fs60 c-fc-white">
                &#xe881;
              </div>
              <div @click="clickStopRecord" v-show="recordStatus == 'RECORDING'" class="c-ww140 c-hh140 c-brp50 c-bg-FF5D3D c-flex-row c-flex-center iconfont c-fs40 c-fc-white">
                &#xea6f;
              </div>
              <div class="c-flex-row c-aligni-center" v-show="recordStatus == 'RECORD_END'">
                <div class="c-textAlign-c c-fc-FF5D3D pr100 c-fs24 c-fc-gray" @click="clickRecordAgain">
                  <div class="iconfont c-fs40 c-hh80 c-ww80 c-brp50 iconBox c-flex-row c-flex-center">&#xe994;</div>
                  <div class="c-pt16 c-fc-gray c-hh26 c-lh26">重录</div>
                </div>
                <div class="c-textAlign-c c-fs22" @click="clickSentRecord">
                  <div class="iconfont c-fc-white c-ww140 c-hh140 c-brp50 c-bg-FF5D3D c-flex-row c-flex-center c-fc-white c-fs60">&#xe63c;</div>
                  <div class="c-pt24 c-fc-gray c-hh26 c-lh26">发送</div>
                </div>
                <div class="c-textAlign-c c-fc-FF5D3D c-pl100 c-fs24" @click="clickTryListen">
                  <div class="iconfont c-fs40 c-hh80 c-ww80 c-brp50 iconBox c-flex-row c-flex-center">&#xe740;</div>
                  <div class="c-pt16 c-fc-gray c-hh26 c-lh26">{{isWeiXin ? (isPlayTest ? '试听中':'试听') : ''}}</div>
                </div>
              </div>
            </div>
            <div class="c-pt24 c-fs24 c-fc-gray c-textAlign-c" v-show="recordStatus == 'RECORD_START'">录音最长1分钟</div>
            <div v-show="recordStatus == 'RECORDING'" class="c-fc-FF5D3D c-textAlign-c">{{getSeconds(recordTime)}}</div>
          </div>
          <!-- 回答视频 -->
          <div v-show="modalType == 3">
            <div class="c-textAlign-c c-pv26">
              <div class="c-ww140 c-hh140 c-brp50 c-bg-FF5D3D c-flex-row c-flex-center iconfont c-fs60 c-fc-white c-mt50 c-mb50  c-m-0auto" v-if="uploadVideoList.length == 0" @click="clickUploadVideo">&#xe882;</div>
              <div v-if="uploadVideoList.length > 0" class="c-flex-row c-justify-sb">
                <div class="c-p c-ww360 c-hh240 c-br10 c-mlr-auto" v-for="(item,index) in uploadVideoList" :key="index">
                  <div @click.stop="clickShowVideo(1, item.questionStatus , item.realUrl)" class="c-p c-w100 c-h c-br10">
                    <img class="c-w100 c-br10" src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png" alt="" />
                    <i @click.stop="clickDelVideo(index)" class="upload-img-del c-fs24 c-bg-white c-fc-FF4A35 c-pz100 c-brp50 c-flex-row c-flex-center iconfont">&#xe6ec;</i>
                  </div>
                </div>
              </div>
              <my-loading :showLoading="showProgress" :text="uploadProgress"></my-loading>
            </div>
            <input class="hide c-cursor-p needsclick" id="myUpload" type="file" accept="video/*" @change='onInputChange($event)' />
          </div>
          <div v-if="isPublic == 1" class="c-mt24 c-fs28 c-flex-row c-aligni-center" @click="clickCheckOnlyLook">
            <span class="iconfont c-fs28 fc-D5D8DE" v-show="(modalType == 2 && !notOtherLook) || (modalType != 2 && !notOtherLookArticle)">&#xe843;</span>
            <span class="iconfont c-fs28 theme-fc" v-show="(modalType == 2 && notOtherLook) || (modalType != 2 && notOtherLookArticle)">&#xe842;</span>
            <span class="c-pl10 c-fs24 c-fc-xblack">该{{questionCustom == 1 ? '预约' : '问题'}}回答不允许被围观，仅{{questionCustom == 1 ? '预约' : '提问'}}用户可见</span>
          </div>
          <div v-if="modalType!=2" @click="clickSubmitAsw" class="c-pf c-p-l0 c-p-b0 c-bg-white c-ph24 c-pv12 c-w100 c-fc-white c-fs28 c-box-shadowEdu">
            <div class="c-w100 theme-bg c-br40 c-textAlign-c c-hh64 c-lh64">提交答案</div>
          </div>
        </div>
      </div>
    </cj-popup>
    <!-- 这是问题详情 -->
    <audio id="audio" class="c-pf c-p-l-100"></audio>
    <!-- 视频弹窗 -->
    <video-popup :showVideo="showVideo" @clickCloseVideo="clickCloseVideo" :videoSrc="currentVideoObj.videoSrc" :m3u8Url="currentVideoObj.m3u8Url"></video-popup>

    <div class="c-mh24 c-pv20 c-ph20 c-br20 c-bg-white c-p">
      <div class="c-flex-row c-aligni-center c-pb16 c-bd-b1-f6">
        <img v-if="questionInfo.isMe != 1 && questionInfo.isHidden == -1" class="c-ww48 c-hh48 c-brp50 " :class="questionInfo.status == -1 ?'c-opacity60':''" src="@/assets/no_login_head.png" alt="" />
        <img v-else class="c-ww48 c-hh48 c-brp50 " :class="questionInfo.status == -1 ?'c-opacity60':''" :src="$addXossFilter(questionInfo.questionAvatar)" alt="" />
        <div class="c-fc-xblack c-ml10 c-fs24 c-w0 c-flex-grow1" :class="questionInfo.status == -1 ?'c-opacity60':''">
          <span v-if="questionInfo.isMe == 1">我
            <span class="c-ph8 c-fc-gray">向</span>
            {{answerInfo.name | nickNameLimitLength(7)}}
            <span class="c-pl8 c-fc-gray">{{questionCustom == 1 ? '预约' : '提问'}}</span>
          </span>
          <span v-else>
            {{questionInfo.isHidden == -1 ? '匿名者' : (questionInfo.questionName) | nickNameLimitLength(7)}}
            <span class="c-ph8 c-fc-gray">向</span>
            {{answerInfo.isMe == 1 ? '我': (answerInfo.name) | nickNameLimitLength(7)}}
            <span class="c-pl8 c-fc-gray">{{questionCustom == 1 ? '预约' : '提问'}}</span>
          </span>
        </div>
      </div>
      <div v-if="questionInfo.comeFrom != 1 && questionInfo.mobile && allInfo.isShowMobile == 1" class="c-pt20 c-fc-gray c-fs24">
        联系电话：{{questionInfo.mobile}}
      </div>
      <img v-if="questionInfo.status == -1" class="c-pa c-p-t0 c-pz1 c-p-r20 c-ww90" :class="questionInfo.status == -1 ?'c-opacity60':''" src="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/qa/overTime.png" alt="">
      <div class="c-w100 c-fs24 c-pt20 c-p" :class="questionInfo.status == -1 ?'c-opacity60':''">
        <qaContentItem :item="questionInfo" :playAduioSrc="playAduioSrc" @clickPreviewImage="clickPreviewImage" @clickPlayAudio="clickPlayAudio" @clickShowVideo="clickShowVideo"></qaContentItem>
        <div class="c-flex-row c-flex-center c-fc-sblack c-pv32 c-mt20" v-if="(questionInfo.comeFrom==1 || questionInfo.comeFrom==3) && (questionInfo.questionStatus==2 || (questionInfo.status == 2 && questionInfo.solution.length == 0))"><span class="c-fc-sgray c-pr16"> ------ </span><span class="iconfont">&#xe7f6;</span> 答主已删除回复<span class="c-fc-sgray c-pl16"> ------ </span></div>
        <!-- 未回答 -->
        <div v-if="questionInfo.status == 3 && questionInfo.price * 1 > 0" class="c-fs20 c-fc-xblack c-pt16">超过72小时未回答，费用会自动退回</div>
        <div class="c-fs24 c-fc-gray c-mt20">{{questionInfo.questionTime}}</div>
        <div class="c-mt16 c-p">
          <span v-if="questionPrice > 0" class="c-fs22 c-fw600 c-fc-xmlred">{{'￥' | iosPriceFilter('Question')}}</span>
          <span class="c-fw600 c-fc-xmlred c-fs36 c-mr10" v-if="questionPrice > 0" v-html="$getPriceStyleHtml(Number(questionPrice).toFixed(2), false, 15, 'c-fs22')"></span>
          <span v-else class="c-fw600 c-fc-xmlred c-fs28 c-mr10">免费</span>
          <span class="c-fc-gray c-fs22">{{questionCustom == 1?'预约':'提问'}}</span>
          <span v-if="questionInfo.comeFrom == 2 && allInfo && allInfo.enableModifyPrice">
            <span class="c-mh10 c-fc-gray c-fs22">/</span>
            <span class="c-fs22 c-fw600 c-fc-xmlred" v-if="allInfo.onlookerPrice > 0">{{'￥' | iosPriceFilter('Question')}}</span>
            <span class="c-fw600 c-fc-xmlred c-fs36 c-mr10" v-if="allInfo.onlookerPrice > 0" v-html="$getPriceStyleHtml(Number(allInfo.onlookerPrice).toFixed(2), false, 15, 'c-fs22')"></span>
            <span v-else class="c-fw600 c-fc-xmlred c-fs28 c-mr10">免费</span>
            <span class="c-fc-gray c-fs22">围观</span>
          </span>
          <div v-if="questionInfo.comeFrom == 1" class="c-pa c-p-r0 c-p-b6 c-pz100  c-fc-gray" @click="delQuestion(questionInfo.questionDetailId, 0)"><i class="iconfont c-fs22">&#xe6b3;</i><span class="c-fs22 c-ml4">删除</span></div>
        </div>
        <!-- <div class="c-flex-row c-aligni-center c-mt12" v-if="(questionInfo.price > 0 && !$isWxAppIos() && ((questionInfo.vipDiscountType == 1 && questionInfo.vipDiscount < 100) || (questionInfo.vipDiscountType == 2 && Number(questionInfo.vipDiscountPrice) < Number(questionInfo.price)))) || (questionInfo.price > 0 && !$isWxAppIos() && ((questionInfo.vipDiscountType == 1 && questionInfo.svipDiscount < 100) || (questionInfo.vipDiscountType == 2 && Number(questionInfo.svipDiscountPrice) < Number(questionInfo.price))))">
          <div v-if="questionInfo.price > 0 && !$isWxAppIos() && ((questionInfo.vipDiscountType == 1 && questionInfo.vipDiscount < 100) || (questionInfo.vipDiscountType == 2 && Number(questionInfo.vipDiscountPrice) < Number(questionInfo.price)))" class="c-ph10 c-pv4 c-bg-xmlred-5 c-fc-xmlred c-br10 c-mr12">
            <span class="c-fs18 c-fc-xmlred">VIP<span v-if="(questionInfo.vipDiscountType == 1 && questionInfo.vipDiscount > 0) || (questionInfo.vipDiscountType == 2 && Number(questionInfo.vipDiscountPrice) > 0)" class="c-fs18 c-fc-xmlred">{{'￥' | iosPriceFilter('Question')}}</span>{{(questionInfo.vipDiscountType == 1 && questionInfo.vipDiscount == 0) || (questionInfo.vipDiscountType == 2 && Number(questionInfo.vipDiscountPrice) == 0) ? '免费' : questionInfo.vipDiscountType == 2 ? Number(questionInfo.vipDiscountPrice).toFixed(2) : Number(questionInfo.vipDiscount * questionInfo.price / 100).toFixed(2)}}</span>
          </div>
          <div v-if="questionInfo.price > 0 && !$isWxAppIos() && ((questionInfo.vipDiscountType == 1 && questionInfo.svipDiscount < 100) || (questionInfo.vipDiscountType == 2 && Number(questionInfo.svipDiscountPrice) < Number(questionInfo.price)))" class="c-ph10 c-pv4 c-bg-xmlred-5 c-fc-xmlred c-br10 c-mr12">
            <span class="c-fs18 c-fc-xmlred">SVIP<span v-if="(questionInfo.vipDiscountType == 1 && questionInfo.svipDiscount > 0) || (questionInfo.vipDiscountType == 2 && Number(questionInfo.svipDiscountPrice) > 0)" class="c-fs18 c-fc-xmlred">{{'￥' | iosPriceFilter('Question')}}</span>{{(questionInfo.vipDiscountType == 1 && questionInfo.svipDiscount == 0) || (questionInfo.vipDiscountType == 2 && Number(questionInfo.svipDiscountPrice) == 0) ? '免费' : questionInfo.vipDiscountType == 2 ? Number(questionInfo.svipDiscountPrice).toFixed(2) : Number(questionInfo.svipDiscount * questionInfo.price / 100).toFixed(2)}}</span>
          </div>
        </div> -->
      </div>
      <div class="c-mt30 c-pb6 c-flex-row c-justify-sa c-w100" v-if="answerInfo.isMe == 1 && questionInfo.status != -1 || questionInfo.comeFrom == 2 && allInfo.enableModifyPrice">
        <div v-if="questionInfo.comeFrom==2 && allInfo.enableModifyPrice" class="c-flex-1 c-hh48 c-flex-row c-flex-center theme-bd1 c-br32 theme-fc c-fs24 c-boxSizing-b" @click="changePrice">
          <span class="iconfont c-fs24 c-mr8">&#xe884;</span>围观价
        </div>
        <div v-if="answerInfo.isMe == 1 && questionInfo.status!=-1" :class="questionInfo.comeFrom==2 && allInfo.enableModifyPrice?'c-ml20':''" class="c-flex-1 c-hh48 c-flex-row c-flex-center theme-bg c-br32 c-fc-white c-fs24" @click="openAnswerModal(questionInfo.questionDetailId)">
          <span class="iconfont c-fs24 c-mr8">&#xe884;</span>写回答
        </div>
      </div>
    </div>
    <!-- 答主信息 -->
    <div class="c-mt24 c-mh24 c-pv20 c-ph20 c-br20 c-bg-white c-p c-fs22 c-flex-row" v-if="answerInfo.isMe == -1" @click="goAswer(answerInfo.answerId)">
      <img :src="$addXossFilter(answerInfo.avatar, require('../../../assets/defult_head.png'))" alt="" class="c-ww80 c-hh80 c-brp50">
      <div class="c-ph12 c-w0 c-flex-grow1">
        <div class="c-flex-row c-aligni-center c-justify-sb c-pt4">
          <div class="c-fs28 c-fw600 c-fc-xblack c-text-ellipsis1 c-lh28">{{answerInfo.name}}</div>
          <div class="c-fs22 c-fc-sgray">{{answerInfo.allCount}}条回答</div>
        </div>
        <div class="c-mt16 c-lh28 c-fs18 c-hh28 c-ph8 theme-bg-10 theme-fc c-br4 c-text-ellipsis1 c-maxw200 c-w-fit">{{answerInfo.honor}}</div>
        <div class="c-flex-row c-aligni-center c-justify-sb c-flexw-wrap">
          <div class="c-flex-shrink0 c-mt20">
            <span v-if="askPrice > 0" class="c-fs22 c-fw600 c-fc-xmlred">{{'￥' | iosPriceFilter('Question')}}</span>
            <span class="c-fw600 c-fc-xmlred c-fs36 c-mr12" v-if="askPrice > 0" v-html="$getPriceStyleHtml(Number(askPrice).toFixed(2), false, 15, 'c-fs22')"></span>
            <span v-else class="c-fw600 c-fc-xmlred c-fs28 c-mr12">免费</span>
            <span v-if="answerInfo.price > 0 && answerInfo.freeCount == 0 && !$isWxAppIos() && ((answerInfo.vipDiscountType == 1 && answerInfo.vipDiscount < 100) || (answerInfo.vipDiscountType == 2 && Number(answerInfo.vipDiscountPrice) < Number(answerInfo.price)))" class="c-ph10 c-pv4 c-bg-xmlred-5 c-fc-xmlred c-br10 c-mr12">
              <span class="c-fs20 c-fc-xmlred">VIP<span v-if="(answerInfo.vipDiscountType == 1 && answerInfo.vipDiscount > 0) || (answerInfo.vipDiscountType == 2 && Number(answerInfo.vipDiscountPrice) > 0)" class="c-fs20 c-fc-xmlred">{{'￥' | iosPriceFilter('Question')}}</span>{{(answerInfo.vipDiscountType == 1 && answerInfo.vipDiscount == 0) || (answerInfo.vipDiscountType == 2 && Number(answerInfo.vipDiscountPrice) == 0) ? '免费' : answerInfo.vipDiscountType == 2 ? Number(answerInfo.vipDiscountPrice).toFixed(2) : Number(answerInfo.vipDiscount * answerInfo.price / 100).toFixed(2)}}</span>
            </span>
            <span v-if="answerInfo.price > 0 && answerInfo.freeCount == 0 && !$isWxAppIos() && ((answerInfo.vipDiscountType == 1 && answerInfo.svipDiscount < 100) || (answerInfo.vipDiscountType == 2 && Number(answerInfo.svipDiscountPrice) < Number(answerInfo.price)))" class="c-ph10 c-pv4 c-bg-xmlred-5 c-fc-xmlred c-br10 c-mr12">
              <span class="c-fs20 c-fc-xmlred">SVIP<span v-if="(answerInfo.vipDiscountType == 1 && answerInfo.svipDiscount > 0) || (answerInfo.vipDiscountType == 2 && Number(answerInfo.svipDiscountPrice) > 0)" class="c-fs20 c-fc-xmlred">{{'￥' | iosPriceFilter('Question')}}</span>{{(answerInfo.vipDiscountType == 1 && answerInfo.svipDiscount == 0) || (answerInfo.vipDiscountType == 2 && Number(answerInfo.svipDiscountPrice) == 0) ? '免费' : answerInfo.vipDiscountType == 2 ? Number(answerInfo.svipDiscountPrice).toFixed(2) : Number(answerInfo.svipDiscount * answerInfo.price / 100).toFixed(2)}}</span>
            </span>
          </div>
          <div class="c-flex-grow1 c-flex-row c-justify-end c-mt20">
            <div class="theme-bg c-fc-white c-hh44 c-ww144 c-br32 c-flex-row c-flex-center" v-if="answerInfo.status == 1" @click.stop="clickAskQue(answerInfo.answerId)">{{questionCustom == 1 ? '预约' : '提问'}}</div>
            <div class="theme-bf c-fc-white c-hh44 c-ww144 c-br32 c-flex-row c-flex-center" v-else-if="answerInfo.status != 1">已下线</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 已回答 -->
    <div class="c-mt24 c-mh24 c-pv24 c-ph20 c-br20 c-bg-white">
      <div class="c-fs26 c-fc-xblack c-fw-b">答主回答</div>
      <div class="" v-if='questionInfo.status == 2 && questionInfo.solution.length > 0'>
        <div class="c-bg-white">
          <div class="c-pt24" v-for="(sItem,sIndex) in questionInfo.solution" :class="sIndex < questionInfo.solution.length - 1 ? 'c-pb24 c-bd-b1-f6' : ''" :key='sIndex'>
            <div class="c-flex-row c-aligni-center c-fs20 c-fc-gray">
              <img class="c-ww48 c-hh48 c-brp50" :src="$addXossFilter(answerInfo.avatar)" alt="" />
              <div class="c-ml10 c-flex-row c-aligni-center">
                <div class="c-fs24 c-fc-xblack c-text-ellipsis1 c-lh28">{{answerInfo.name}}</div>
                <span class="c-maxw160 c-inlineblack c-lh28 c-fs18 c-pv2 c-ph10 theme-bg-10 theme-fc c-br6 c-ml12 c-text-ellipsis1">{{answerInfo.honor}}</span>
              </div>
            </div>
            <qaContentItem class="c-mt24" :isShowIcon="false" :item="sItem" :playAduioSrc="playAduioSrc" @clickPreviewImage="clickPreviewImage" @clickPlayAudio="clickPlayAudio" @clickShowVideo="clickShowVideo"></qaContentItem>
            <div class="c-mt20 c-flex-row c-aligni-center c-justify-sb">
              <div class="c-fs24 c-fc-gray">{{sItem.createdAt}}</div>
              <div v-if="questionInfo.comeFrom == 2" class="c-fs22 c-fc-gray" @click="delAnswer(sItem.solutionId, sIndex, 0)"> <span class="iconfont c-fs22">&#xe6b3;</span><span class="c-fs22 c-ml4">删除</span></div>
            </div>
          </div>
        </div>
        <div @click="clickFreeChase" v-if="questionInfo.isMe == 1 && (restAppendQuestionNum == 'N' || restAppendQuestionNum > 0)" class="c-pt24 c-flex-row c-justify-center c-ph24 c-bg-white">
          <div class="c-hh48 c-lh48 c-br32 theme-bg c-fs22 c-fc-white c-ph20">免费追问{{restAppendQuestionNum * 1 > 0 ? `(${restAppendQuestionNum})` : ''}}</div>
        </div>
      </div>
      <loading-status-tem
        :noData="questionInfo.solution && questionInfo.solution.length == 0"
        :noneImage="noneImage"
        noDataStyle="padding-top:2.5rem;"
        noDataTextClass="c-mb160 c-fs24 c-fc-sgray"
        noDataText="暂无相关回答"
      ></loading-status-tem>
    </div>

    <!-- 追问列表 -->
    <div v-if="chaseList.length > 0" class="c-mt24 c-mh24 c-pv24 c-ph20 c-br20 c-bg-white">
      <div class="c-fs26 c-fc-xblack c-fw-b">用户追问</div>
      <div class="c-bg-white ">
        <div class="c-fs24 c-bg-white c-pt24" v-for="(item,index) in chaseList" :key="index" :class="index < chaseList.length - 1 ?'c-bd-b1':''">
          <div class="c-flex-row c-aligni-center c-justify-sb c-fc-gray c-p">
            <div class="c-p c-flex-row c-aligni-center">
              <img v-if="questionInfo.isMe != 1 && questionInfo.isHidden == -1" class="c-ww48 c-hh48 c-brp50 " src="@/assets/no_login_head.png" alt="" />
              <img v-else class="c-ww48 c-hh48 c-brp50 " :src="$addXossFilter(item.questionAvatar)" alt="" />
              <div v-if="questionInfo.isMe == 1" class="c-ml10 c-fs24 c-fc-xblack c-text-ellipsis1 c-lh28">{{questionInfo.comeFrom == 1 ? questionInfo.questionName : answerInfo.name}}</div>
              <div v-else class="c-ml10 c-fs24 c-fc-xblack c-text-ellipsis1 c-lh28">{{questionInfo.isHidden == -1 ? '匿名者' : questionInfo.questionName}}</div>
            </div>
            <img v-if="item.status == -1" class="c-pa c-p-t0 c-pz1 c-p-r10 c-ww90" src="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/qa/overTime.png" alt="">
            <div v-if="answerInfo.isMe == 1 && item.status !=-1" class="c-ww144 c-hh48 c-flex-row c-flex-center theme-bg c-br32 c-fc-white c-fs24" @click="openAnswerModal(questionInfo.questionDetailId,item)">
              <span class="iconfont c-fs24 c-mr8">&#xe884;</span>写回答
            </div>
          </div>
          <!-- 问题内容 -->
          <qaContentItem :showNum="3" class="c-mt24 c-ml58" :item="item" :playAduioSrc="playAduioSrc" @clickPreviewImage="clickPreviewImage" @clickPlayAudio="clickPlayAudio" @clickShowVideo="clickShowVideo"></qaContentItem>
          <div class="c-mt20 c-ml58 c-flex-row c-justify-sb c-aligni-center c-pb26">
            <div class="c-fs24 c-fc-gray">{{item.questionTime}}</div>
            <div class="iconfont c-fs22 c-fc-gray" v-if="questionInfo.comeFrom == 1" @click="delQuestion(item.questionDetailId, 1)">&#xe6b3;<span class="c-fs22 c-ml4">删除</span></div>
          </div>
          <!-- 已回答 -->
          <div class="c-ml48 c-mt24 c-mb20" v-if='item.status == 2 && item.solution.length>0'>
            <div class="c-bg-sgray c-br10 c-ph20">
              <div class="c-pv24" v-for="(sItem,sIndex) in item.solution" :key='sIndex' :class="[sIndex == 0?'c-mt24':'', sIndex == item.solution.length - 1?'':'c-bd-b1-mgray']">
                <div class="c-flex-row c-aligni-center c-fs20 c-fc-gray">
                  <img class="c-ww48 c-hh48 c-brp50" :src="$addXossFilter(answerInfo.avatar)" alt="" />
                  <div class="c-ml10 c-flex-row c-aligni-center">
                    <div class="c-fs24 c-fc-xblack c-text-ellipsis1 c-lh28">{{answerInfo.name}}</div>
                    <span class="c-maxw160 c-inlineblack c-lh28 c-fs18 c-pv2 c-ph10 theme-bg-10 theme-fc c-br6 c-ml12 c-text-ellipsis1">{{answerInfo.honor}}</span>
                  </div>
                </div>
                <qaContentItem :showNum="3" class="c-mt24 c-ml58" :item="sItem" :playAduioSrc="playAduioSrc" @clickPreviewImage="clickPreviewImage" @clickPlayAudio="clickPlayAudio" @clickShowVideo="clickShowVideo"></qaContentItem>
                <div class="c-mt20 c-ml58 c-flex-row c-justify-sb c-aligni-center c-pb26">
                  <div class="c-fs24 c-fc-gray">{{sItem.createdAt}}</div>
                  <div class="iconfont c-fs22 c-fc-gray" v-if="questionInfo.comeFrom == 2" @click="delAnswer(sItem.solutionId, sIndex, 0)">&#xe6b3;<span class="c-fs22 c-ml4">删除</span></div>
                </div>
              </div>
            </div>
          </div>
          <div class="c-flex-row c-flex-center c-fc-sblack c-pv32 c-mt20 c-mh20" v-if="item.questionStatus==2"><span class="c-fc-sgray c-pr16"> ------ </span><span class="iconfont">&#xe7f6;</span> 答主已删除回复<span class="c-fc-sgray c-pl16"> ------ </span></div>
        </div>
      </div>
    </div>

    <div class="c-w100 c-maxw640 c-hh80 c-lh80 c-ph24 c-pf c-pz1 c-p-b0 c-flex-row c-justify-sa c-aligni-center c-fs20 c-fc-sblack c-bg-white c-pv30 c-box-shadow-bottom">
      <div class="c-ww160 c-hh48 c-lh48 c-flex-row c-flex-center c-fs24 c-fc-xblack" @click="clickGoQA">
        <span class="iconfont theme-fc c-mr12">&#xe87c;</span>
        {{questionCustom == 1 ? '预约' : '问答'}}专区
      </div>
      <span class="c-fc-f6">|</span>
      <div class="c-ww160 c-hh48 c-lh48 c-flex-row c-flex-center c-fs24 c-fc-xblack" @click="clickGoMy" v-if="userIdentity != 4">
        <span class="iconfont theme-fc c-mr12">&#xe879;</span>
        我的{{questionCustom == 1 ? '预约' : '问答'}}
      </div>
    </div>
    <div class="masker" v-if="isShowMask">
      <div class="box bg-fa c-pa c-p-tp50 c-p-tl50 c-translate-xy-50 c-br16 c-fc-gray">
        <div class="c-ph24">
          <div class="c-pt52 c-pb40 c-fw-b c-fs28 c-fc-xblack c-textAlign-c">围观价格</div>
          <div class="c-bd1-ccc c-flex-row c-br8 c-fs24 c-ph20 c-pv16 c-bg-white c-ww430">
            <input type="number" v-model="modifyPrice" placeholder="请输入价格" class="c-ph10 c-bd0 c-fs22 c-w0 c-flex-grow1" @input="inputPrice">元
          </div>
          <div class="c-pt10 c-fs20">{{msg}}</div>
        </div>
        <div class="c-mt30 c-flex-row c-justify-sa c-bd-t1-mgray c-fs28">
          <div class="c-pt18 c-bd-r1-mgray c-w50 c-textAlign-c c-pb16" @click="cancel">取消</div>
          <div class="theme-fc c-pt18 c-w50 c-textAlign-c c-pb16" @click="confirm">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import { utilJs, wxUtilJs } from "@/utils/common.js";
import record from "@/utils/recorder.js";
import videoPopup from "@/components/templates/common/videoPopup.vue";
import myLoading from "@/plugin/loading/loading.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import qaContentItem from "@/components/templates/qa/qaContentItem.vue";
import TcVod from "vod-js-sdk-v6";
let questionDetailId = "";
let questionPushId = "";
let curPlayLocalId = ""; //当前播放本地音频ID
let currentLocalId = ""; //当前录制本地音频ID
let recordTimeCon; //录音计时控制器
let isPlayTest = false; //是否试听
let isClicking = false;
let curAswQuestionDetailId = ""; //当前回答问题ID
let curChaseId = ""; //当前追问回答问题ID
let audioServerId = ""; //音频serverId
let serverIdImgArr = []; //临时存放的上传图片searveID
let imgData = {};
let uploader = null;
export default {
  name: "AnswerDetail",
  components: {
    myLoading,
    MySmallTabbar,
    videoPopup,
    loadingStatusTem,
    qaContentItem
  },
  props: [],
  beforeCreate() { },
  data() {
    return {
      noneImage: 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/qa/qaNoneData.png',
      customPointName: localStorage.getItem("customPointName"),
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      problemStatus: JSON.parse(localStorage.getItem("questionInfo")),
      questionCustom: localStorage.getItem("questionCustom"), //定制阿卡西线上学院
      questionInfo: {},
      answerInfo: {},
      modalType: 2, //回答弹窗的tab
      showAnswerModal: false, //显示回答弹窗
      answerText: "", //弹窗回答的内容
      recordStatus: "RECORD_START", //录音状态
      playAduioSrc: "", //播放音频地址
      recordTime: 0,
      uploadImgList: [],
      notOtherLook: false,
      notOtherLookArticle: false,
      chaseList: [], //追问列表
      restAppendQuestionNum: '', //剩余追问次数
      isPublic: 1,
      isWeiXin: true,
      qiniuInfo: {}, //录音完后的音频上传到七牛，这里是七牛的相关信息
      blob: '', //录音之后要上传七牛的音频文件
      isShowPf: true, //防止安卓手机输入文字时被顶上去
      docmHeight: document.documentElement.clientHeight, //默认屏幕高度
      showHeight: document.documentElement.clientHeight, //实时屏幕高度
      showVideo: false,
      uploadVideoList: [],
      showProgress: false,
      videoMp4: '',
      uploadProgress: '0',
      isReply: 0,
      tabMediaList: [
        {title: '语音回答', index: 2},
        {title: '视频回答', index: 3},
        {title: '图文回答', index: 1},
      ],
      isPlayingAudio: false,
      imageCount: 9,
      userIdentity: '', //1答主2提问者3围观者4都不是
      currentVideoObj: {},
      isUpoloadVideo: false,
      allInfo: {}, //返回所有信息
      isShowMask: false,
      msg: '', // 提示内容
      modifyPrice: '', // 修改围观价格
      vipType: localStorage.getItem("vipType" + localStorage.getItem("userId")),
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      questionDetailId = vm.$route.query.questionDetailId
      if (from.path != "/homePage/login/bindMobile") {
        // 不是从绑定手机号页面来
        // if (localStorage.getItem('enableBindPhoneEnterBeforeInQuestion') == 1 && localStorage.getItem('uMobile') == '') {
        //   vm.$routerGo(vm, "push", {
        //     path: '/homePage/login/bindMobile'
        //   })
        // } else {
          vm.getQuestionIfno()
        // }
      } else {
        // 从绑定手机页面来,手机号为空 即返回
        // if (localStorage.getItem('enableBindPhoneEnterBeforeInQuestion') == 1 && localStorage.getItem('uMobile') == '') {
        //   vm.$routerGo(vm, "replace", { path: "/" });
        // } else {
          // 从绑定手机页面来,手机号存在 即绑定成成功
          vm.$routerGo(vm, "push", {
            path: '/homePage/qa/answerDetail',
            query: {
              questionDetailId: questionDetailId,
              questionPushId: questionPushId,
            }
          })
          vm.getQuestionIfno()
        // }
      }
    });
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {
  },
  computed: {
    askPrice() {
      const {vipDiscountType, vipDiscount, svipDiscount, vipDiscountPrice, svipDiscountPrice, price} = this.answerInfo
      const vipPrice = Number(vipDiscountType == 1 ? Number(vipDiscount * price / 100) : vipDiscountPrice)
      const svipPrice = Number(vipDiscountType == 1 ? Number(svipDiscount * price / 100) : svipDiscountPrice)
      return Number((this.vipType == 4 ? svipPrice : this.vipType == 2 ? vipPrice : price))
    },
    questionPrice() {
      const {vipDiscountType, vipDiscount, svipDiscount, vipDiscountPrice, svipDiscountPrice, price} = this.questionInfo
      const vipPrice = Number(vipDiscountType == 1 ? Number(vipDiscount * price / 100) : vipDiscountPrice)
      const svipPrice = Number(vipDiscountType == 1 ? Number(svipDiscount * price / 100) : svipDiscountPrice)
      return Number((this.vipType == 4 ? svipPrice : this.vipType == 2 ? vipPrice : price))
    },
    qaVIPPrice() {
      let price = 0.00
      if (((this.questionInfo.vipDiscountType == 1 && Number(this.questionInfo.vipDiscount * this.questionInfo.price / 100) > 0) || (this.questionInfo.vipDiscountType == 2 && this.questionInfo.vipDiscountPrice > 0))) {
        if (this.questionInfo.vipDiscountType == 1) {
          price = Number(this.questionInfo.vipDiscount * this.questionInfo.price / 100).toFixed(2)
        } else {
          price = Number(this.questionInfo.vipDiscountPrice).toFixed(2)
        }
      } else {
        price = 0.00
      }
      return price
    },
    qaSVIPPrice() {
      let price = ''
      // SVIP折扣
      if (((this.questionInfo.vipDiscountType == 1 && Number(this.questionInfo.svipDiscount * this.questionInfo.price / 100) > 0) || (this.questionInfo.vipDiscountType == 2 && this.questionInfo.svipDiscountPrice > 0))) {
        if (this.questionInfo.vipDiscountType == 1) {
          price = Number(this.questionInfo.svipDiscount * this.questionInfo.price / 100).toFixed(2)
        } else {
          price = Number(this.questionInfo.svipDiscountPrice).toFixed(2)
        }
      } else {
        price = '0.00'
      }
      return price
    },
  },
  watch: {
    showHeight: function () {
      if (utilJs.isAdnroidBrower()) {
        if (this.docmHeight == this.showHeight) {
          this.isShowPf = true;
        }
      }
    }
  },
  methods: {
    // 秒数转化为 xx：xx
    getSeconds(s) {
      if (s >= 60) {
        return `${parseInt(s / 60) <= 9 ? '0' : ''}${parseInt(s / 60)}:${s % 60 <= 9 ? '0' : ''}${s % 60}`
      }
      return `00:${s >= 10 ? s : '0' + s}`
    },
    //免费追问
    clickFreeChase() {
      this.$routerGo(this, "push", {
        path: `/homePage/qa/questionDetail?answerId=${this.answerInfo.answerId}&chaseId=${this.questionInfo.questionDetailId}&goAsk=0&src=1`
      });
    },
    changeType(type) {
      this.type = type;
    },
    changeModalType(type) {
      if (type != 2 && this.recordStatus == 'RECORDING') {
        this.$showCjToast({
          text: `正在录音中`,
          type: "warn",
          time: 3000
        })
        return;
      }
      this.modalType = type;
    },
    //输入框失去焦点
    blurInput(e) {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        setTimeout(() => {
          document.body.scrollTop = 0;
        });
      }
      if (utilJs.isAdnroidBrower()) {
        this.isShowPf = true;
      }
    },
    //聚集焦点
    focusTextarea(e) {
      if (utilJs.isAdnroidBrower()) {
        this.isShowPf = false;
      }
    },
    //打开回答问题弹窗
    openAnswerModal(qId, chaseItem) {
      curChaseId = '';
      let chasePublic = 1;
      if (chaseItem) {
        curChaseId = chaseItem.questionDetailId;
        chasePublic = chaseItem.isPublic;
      }
      this.isPublic = this.questionInfo.isPublic == 1 && chasePublic == 1 ? 1 : -1;
      curAswQuestionDetailId = qId;
      this.showAnswerModal = true;
      this.isUpoloadVideo = true;
    },
    //点击选择框是否允许围观
    clickCheckOnlyLook() {
      if (this.modalType == 2) {
        this.notOtherLook = !this.notOtherLook;
      } else {
        this.notOtherLookArticle = !this.notOtherLookArticle;
      }
    },
    //点击开始录音
    clickStartRecord() {
      this.recordStatus = "RECORDING";
      //点击开始录音
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
      this.stopListenAudio();
      this.recordTime = 0;
      if (this.isWeiXin) {
        wxUtilJs.startRecord();
        recordTimeCon = setInterval(() => {
          if (this.recordTime < 60) {
            this.recordTime++;
          } else {
            clearInterval(recordTimeCon);
            this.recordStatus = "RECORD_END";
          }
        }, 1000);
        wxUtilJs.onVoiceRecordEnd().then(localId => {
          this.recordStatus = "RECORD_END";
          clearInterval(recordTimeCon);
          currentLocalId = localId;
        });
      } else {
        record.recOpen(() => {
          record.recStart();
          recordTimeCon = setInterval(() => {
            if (this.recordTime < 60) {
              this.recordTime++;
            } else {
              clearInterval(recordTimeCon);
              this.recordStatus = "RECORD_END";
            }
          }, 1000);
          record.recVoiceRecordEnd(res => {
            this.recordStatus = "RECORD_END";
            clearInterval(recordTimeCon);
            this.blob = res;
          });
        }, () => {
          this.recordStatus = "READY";
        });
      }
    },
    //点击停止录音
    clickStopRecord() {
      this.recordStatus = "RECORD_END";
      clearInterval(recordTimeCon);
      if (this.isWeiXin) {
        wxUtilJs.stopRecord().then(localId => {
          currentLocalId = localId;
        });
      } else {
        record.recStop(res => {
          this.blob = res;
        });
      }

      if (this.recordTime < 1) {
        this.$showCjToast({
          text: "录音时间太短",
          type: "warn",
          time: 1000
        });
        this.recordStatus = "RECORD_START";
      }
    },
    //点击发送录音
    clickSentRecord() {
      this.showAnswerModal = false;
      this.recordStatus = "RECORD_START";
      if (isPlayTest) {
        wxUtilJs.stopVoice({ localId: currentLocalId });
        isPlayTest = false;
      }
      if (this.isWeiXin) {
        wxUtilJs.uploadVoice({ localId: currentLocalId }).then(serverId => {
          audioServerId = serverId;
          this.clickSubmitAsw();
        });
      } else {
        record.uploadAudioFile(this.blob, this.qiniuInfo, sres => {
          audioServerId = sres;
          this.clickSubmitAsw();
        }, () => {});
      }
    },

    //点击试听
    clickTryListen() {
      if (!this.isWeiXin) {
        return;
      }
      isPlayTest = true;
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
      wxUtilJs.playVoice({ localId: currentLocalId });
    },
    //停止试听
    stopListenAudio() {
      if (isPlayTest) {
        wxUtilJs.stopVoice({ localId: currentLocalId });
        isPlayTest = false;
      } else {
        wxUtilJs.stopVoice({ localId: curPlayLocalId });
      }
    },
    //点击重录
    clickRecordAgain() {
      this.recordStatus = "RECORD_START";
    },

    //点击播放音频
    clickPlayAudio(audioUrl) {
      let audio = document.getElementById("audio");

      if (this.playAduioSrc == audioUrl) {
        this.playAduioSrc = "";
        document.getElementById("audio").src = this.playAduioSrc;
        this.stopListenAudio();
        return;
      }
      this.playAduioSrc = audioUrl;
      isPlayTest = false;

      //返回mp3则用audio播放，否则将使用微信将文件下载然后播放
      if (this.playAduioSrc.includes("http") || !this.playAduioSrc) {
        document.getElementById("audio").src = this.playAduioSrc;
        audio.play();
        audio.removeEventListener("ended", this.playAudioEnd, false);
        audio.addEventListener("ended", this.playAudioEnd, false);
      } else {
        wxUtilJs.downloadVoice({ serverId: this.playAduioSrc }).then(res => {
          curPlayLocalId = res;
          wxUtilJs.playVoice({ localId: res });
        });
      }
      this.isPlayingAudio = true;
    },
    //监听音频播放结束执行的内容
    playAudioEnd() {
      //播放结束自动播放下一个非自己发的语音并且非已读语音
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
      this.isPlayingAudio = false;
    },

    //点击选择图片
    clickChoosePic(event) {
      if (this.isWeiXin) {
        wxUtilJs.chooseImage({
          count: this.imageCount, // 默认9
          sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"] // 可以指定来源是相册还是相机，默认二者都有
        }).then(localIds => {
          // this.uploadImgList.pop();
          localIds.reverse();
          this.$loading.show({
            text: "上传中..."
          });
          serverIdImgArr = [];
          //获取剩余能传多少张图片，若已选的图片数量大于剩余数。则只传剩余数量的图片
          let residueLength = 9 - this.uploadImgList.length;
          if (localIds.length > residueLength) {
            localIds.length = residueLength;
          }
          this.wxUploadImg(localIds, localIds.length - 1);
        });
      } else {
        utilJs.imgUpload(event.target.files, imgData, 'qa', res => {
          if (res.length > 0) {
            this.uploadImgList.push(res);
            document.getElementById("uploadImg").value = null;
            // this.uploadImgList = [...this.uploadImgList, ...res];
            // if (this.uploadImgList.length > 9) {
            //   this.uploadImgList.length = 9;
            // }
            // if (this.uploadImgList.length < 9) {
            //   this.uploadImgList.push("uploadQaImg");
            // }
          }
        }, fRes => {});
      }
    },

    //上传图片到微信-----IOS不能一次性传多张，只好递归传
    wxUploadImg(localIds, localIdsLength) {
      wxUtilJs
        .uploadImage({ localId: localIds[localIdsLength] }, true)
        .then(res => {
          serverIdImgArr.push(res);
          if (localIdsLength > 0) {
            this.wxUploadImg(localIds, --localIdsLength);
          } else {
            this.syncUploadPic(serverIdImgArr);
          }
        });
    },

    //上传图片到服务器
    syncUploadPic(serverIdArr) {
      utilJs.postMethod(
        global.apiurl + "question/downWxMedia",
        {
          serverId: JSON.stringify(serverIdArr),
          mediaType: 2
        },
        res => {
          this.$loading.hide();
          if (res.length > 0) {
            this.uploadImgList = [...this.uploadImgList, ...res];
            this.imageCount = 9 - this.uploadImgList.length;
          }
        },
        failRes => {
          this.$loading.hide();
        }
      );
    },
    //删除上传的图片
    delUploadImage(index) {
      this.uploadImgList.splice(index, 1);
      this.imageCount = 9 - this.uploadImgList.length;
    },

    //点击图片放大预览
    clickPreviewImage(imgUrl, itemImgList) {
      if (!imgUrl || imgUrl == "uploadQaImg") {
        return;
      }
      let imgUrlList = [];
      itemImgList = itemImgList.filter(item => {
        return item != 'uploadQaImg'
      })
      for (let key of itemImgList) {
        if (key) {
          imgUrlList.push(key);
        }
      }

      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: imgUrlList // 需要预览的图片http链接列表
      });
    },
    //点击提问
    clickAskQue(answerId) {
      this.$routerGo(this, "push", {
        path: `/homePage/qa/questionDetail?answerId=${answerId}&goAsk=1&src=1`
      });
    },
    //答主详情页
    goAswer(answerId) {
      if (this.answerInfo.status == -1) {
        return;
      }
      this.$routerGo(this, "push", {
        path: "/homePage/qa/aswerCircuseeList",
        query: {
          answerId: answerId,
        }
      })
    },
    //点击问答专区
    clickGoQA() {
      this.$routerGo(this, "push", {
        path: "/homePage/qa/answerLord"
      });
    },
    clickGoMy() {
      localStorage.setItem("fromAnswerDetail", 1);
      let userType = this.userIdentity == 1 ? 2 : this.userIdentity == 2 ? 1 : 3;
      this.$routerGo(this, "push", {
        path: "/homePage/qa/myQA",
        query: {
          userType: userType,
        }
      });
    },
    //获取答主信息
    getQuestionIfno() {
      utilJs.getMethod(
        global.apiurl +
        "question/getQuestionDetail?questionDetailId=" +
        questionDetailId + "&questionPushId=" + questionPushId,
        res => {
          this.answerInfo = res.answerInfo;
          this.questionInfo = res.detailInfo;
          this.comeFrom = res.detailInfo.comeFrom;
          this.userIdentity = res.userIdentity;
          this.allInfo = res;
          //有回答过才可追问
          if (res.detailInfo.restAppendQuestionNum && res.detailInfo.status == 2) {
            this.restAppendQuestionNum = res.detailInfo.restAppendQuestionNum;
          }
          let appendList = res.detailInfo.appendQuestion || [];
          let cArray = [];
          for (let item of appendList) {
            // item.questionTime = utilJs.changeQaTime(item.questionTime);
            if (this.questionInfo.isMe == 1 || this.answerInfo.isMe == 1 || item.isPublic == 1) {
              cArray.push(item)
            }
          }
          this.chaseList = cArray;
          wxUtilJs.onVoicePlayEnd(() => {
            //监听微信语音播放结束事件
            this.playAudioEnd();
          });
        }
      );
    },
     //获取得到的文件file
    onInputChange(e) {
      let inputFile = e.target.files[0];
      if (inputFile && inputFile.size > 1024 * 1024 * 1024) {
        this.$showCjToast({
          text: "视频文件大小不能超过1G",
          type: "warn",
          time: 1000
        });
        return false;
      }
      if (inputFile) {
        this.uploadVideoToTencent(inputFile);
      }
    },
    //保存视频
    videoFirstSave(data) {
      utilJs.postMethod(global.apiurl + "signCard/videoFirstSave", data, (res) => { });
    },
    uploadVideoToTencent(inputFile) {
      let that = this;
      this.showProgress = true;
      const tcVod = new TcVod({
        // eslint-disable-line
        getSignature: utilJs.getVideoSign
      });
      uploader = tcVod.upload({
        mediaFile: inputFile // 媒体文件（视频或音频或图片），类型为 File
      });
      uploader.on("media_progress", function (info) {
        that.uploadProgress = `上传进度:${Math.floor(info.percent * 100)}%`;
      });
      uploader
        .done()
        .then(function (result) {
          that.videoMp4 = result.video.url;
          that.showProgress = false;
          let videoInfo = {
            url: result.fileId,
            realUrl: result.video.url
          };
          that.uploadVideoList.push(videoInfo);
          let data = {
            videoId: result.fileId,
            videoMp4: result.video.url,
            videoName: inputFile.name
          };
          that.videoFirstSave(data);
          that.uploadProgress = '0';
          document.getElementById("myUpload").value = null;
        })
        .catch((err) => {
          that.showProgress = false;
          that.$showCjToast({
            text: "上传失败，请尝试重新上传",
            type: "warn",
            time: 1000
          });
          that.uploadProgress = '0';
          document.getElementById("myUpload").value = null;
          let errorData = {
            errorMsg: JSON.stringify(err),
            errorType: "UPLOAD_VIDEO_ERROR"
          };
          utilJs.reprotError(errorData);
        });
    },
    //点击关闭视频
    clickCloseVideo() {
      if (this.showVideo) {
        this.showVideo = false;
        if (this.isReply == 1 && this.isUpoloadVideo == true) {
          this.showAnswerModal = true;
        }
      }
    },
    //点击显示视频
    clickShowVideo(isReply, questionStatus, videoSrc, m3u8Url) {
      if (this.isPlayingAudio == true) {
        this.playAudioEnd();
      }
      console.log(videoSrc, m3u8Url, 'videoSrc, m3u8Url')
      if (isReply == 1) {
        this.isReply = 1;
      }
      // this.showAnswerModal = false;
      this.showVideo = true;
      this.currentVideoObj = {videoSrc, m3u8Url}
    },
    clickUploadVideo() {
      document.getElementById("myUpload").click();
    },
    // 删除视频
    clickDelVideo(index) {
      this.uploadVideoList.splice(index, 1);
    },
    checkInput() {
     if (this.modalType == 3 && this.uploadVideoList.length == 0) {
        this.$showCjToast({
          text: "请添加视频",
          type: "warn",
          time: 1500
        });
        return false;
      } else if (
        this.modalType == 1 &&
        !this.answerText &&
        this.uploadImgList.length == 0
      ) {
        this.$showCjToast({
          text: "请输入回复内容!",
          type: "warn",
          time: 1500
        });
        return false;
      } else {
        return true;
      }
    },
    closeAnswerModal() {
      if (this.recordStatus != "RECORD_START" || this.uploadVideoList.length > 0 || this.answerText != '' || this.uploadImgList.length > 0) {
        let that = this;
        this.$cjConfirm({
          title: '提示',
          titleCenter: true,
          message: '关闭弹窗后，会清除填写的内容，确定要关闭弹窗?',
          messageCenter: true,
          showMasker: true,
          clickCloseModal: false,
          showCancelButton: true,
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          onConfirm() {
            that.stopListenAudio();
            that.recordStatus = "RECORD_START";
            that.uploadVideoList = [];
            that.answerText = '';
            that.uploadImgList = [];
            that.isReply = 0;
            that.modalType = 2;
            that.showAnswerModal = false;
            clearInterval(recordTimeCon);
          },
          onCancel:() => {
            that.showAnswerModal = true;
          }
        })
      } else {
        this.modalType = 2;
        this.showAnswerModal = false;
      }
      this.isUpoloadVideo = false;
    },
    //提交答案
    clickSubmitAsw() {
      if (!this.checkInput()) {
        return;
      }
      if (isClicking) {
        return;
      }
      isClicking = true;
      //去掉图片中含有upload的item
      let imgUrlListJson = "";

      let isPublic = 1;
      if (this.modalType == 1) {
        isPublic = this.notOtherLookArticle ? -1 : 1;
        imgUrlListJson = JSON.stringify(this.uploadImgList);
      } else {
        isPublic = this.notOtherLook ? -1 : 1;
      }
      utilJs.postMethod(
        global.apiurl + "question/submitSolution",
        {
          type: curChaseId ? 2 : 1,
          questionDetailId: curChaseId || curAswQuestionDetailId,
          answerType: this.modalType,
          imgUrl: this.modalType == 1 ? imgUrlListJson : "",
          content: this.modalType == 1 ? this.answerText : "",
          isHidden: isPublic,
          serverId: this.modalType == 2 ? audioServerId : "",
          recordTime: this.modalType == 2 ? this.recordTime : "",
          videoId: this.modalType == 3 ? this.uploadVideoList[0].url : "",
          videoMp4: this.modalType == 3 ? this.videoMp4 : "",
        },
        res => {
          isClicking = false;
          if (res) {
            this.$showCjToast({
              text: "回答成功",
              type: "success",
              time: 1500
            });
            this.isUpoloadVideo = false;
            this.initData();
            this.getQuestionIfno();
          }
        },
        failRes => {
          isClicking = false;
        }
      );
    },
    delAnswer(solutionId, index, type) {
      let $this = this;
      this.$cjConfirm({
        title: '提示',
        titleCenter: true,
        message: '删除后,回答的内容不可见.确定删除该回答?',
        messageCenter: true,
        showMasker: true,
        clickCloseModal: false,
        showCancelButton: true,
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        onConfirm() {
          utilJs.getMethod(global.apiurl + `question/deleteMyQuestionSolution/${solutionId}`, res => {
            $this.$showCjToast({
              text: '删除成功！',
              type: 'success'
            });
            $this.getQuestionIfno();
          });
        },
      })
    },
    delQuestion(questionDetailId, type) {
      let $this = this;
      this.$cjConfirm({
        title: '提示',
        titleCenter: true,
        message: '删除后,将提问的内容和回复的内容都不可见.确定删除该提问内容?',
        messageCenter: true,
        showMasker: true,
        clickCloseModal: false,
        showCancelButton: true,
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        onConfirm() {
          utilJs.getMethod(global.apiurl + `question/deleteMyQuestionDetail/${questionDetailId}`, res => {
            $this.$showCjToast({
              text: '删除成功！',
              type: 'success'
            });
            if (type == 0) {
              setTimeout(() => {
                $this.$routerGo($this, "push", {
                  path: '/homePage/qa/myQA',
                })
              }, 2000);
            } else {
              $this.getQuestionIfno();
            }
          });
        },
      })
    },
    changePrice() {
      this.isShowMask = true;
    },
    cancel() {
      this.isShowMask = false;
      this.modifyPrice = '';
      this.msg = '';
    },
    confirm() {
      if (!this.checkPrice()) {
        return;
      }
      this.isShowMask = false;
      let data = {
        questionDetailId: questionDetailId,
        price: this.modifyPrice
      }
      utilJs.postMethod(`${global.apiurl}question/modifyPrice`, data, res => {
        this.$set(this.allInfo, "onlookerPrice", Number(this.modifyPrice).toFixed(2))
        this.modifyPrice = '';
        this.msg = '';
      })
    },
    checkPrice() {
      let priceReg = /(^\d{1,5}(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
      if (!priceReg.test(this.modifyPrice)) {
        if (this.modifyPrice < 100000) {
          this.$showCjToast({
            text: "请输入正确价格",
            type: "warn",
          });
          return false;
        } else {
          this.$showCjToast({
            text: "小于10万",
            type: "warn",
          });
          return false;
        }
      } else {
        return true;
      }
    },
    inputPrice() {
      if (this.modifyPrice < this.allInfo.pointsDeductMoney) {
        this.msg = `围观价<${this.allInfo.pointsDeductMoney}元(${this.customPointName}可抵扣金额)，围观者支付将不支持${this.customPointName}抵扣`
      } else {
        this.msg = '';
      }
    },
    initData() {
      clearInterval(recordTimeCon); //录音计时控制器
      this.imageCount = 9;
      this.modalType = 2; //回答弹窗的tab
      this.showAnswerModal = false; //显示回答弹窗
      this.answerText = ""; //弹窗回答的内容
      this.userIdentity = "";
      this.recordStatus = "RECORD_START"; //录音状态
      this.playAduioSrc = ""; //播放音频地址
      this.uploadImgList = [];
      this.recordTime = 0;
      this.notOtherLook = false;
      this.notOtherLookArticle = false;
      this.showVideo = false;
      this.chaseList = []; //追问列表
      this.uploadVideoList = [];
      this.restAppendQuestionNum = ''; //剩余追问次数
    },
    //分享
    wechatShare: function () {
      let questionInfo = JSON.parse(
        window.localStorage.getItem("questionInfo")
      );
      let title = questionInfo.title;
      let shareImg = questionInfo.cover;
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/qa/answerLord?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = questionInfo.describe;
      utilJs.wechatConfig(
        shareUrl,
        title,
        shareImg,
        shareDesc,
        function () { },
        true
      );
    },
    //手机端分享
    appShare() {
      let questionInfo = JSON.parse(
        window.localStorage.getItem("questionInfo")
      );
      let title = questionInfo.title;
      let shareImg = questionInfo.cover;
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/qa/answerLord?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = questionInfo.describe;
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
    watchResize() {
      //实时变化的窗口高度
      this.showHeight = document.documentElement.clientHeight;
    },
  },
  activated() {
    if (document.getElementById("audio")) {
      document.getElementById("audio").src = '';
    }
    questionDetailId = this.$route.query.questionDetailId || "";
    questionPushId = this.$route.query.questionPushId || "";
    if ((this.problemStatus && this.problemStatus.status == -1) || (this.companyAuth && this.companyAuth.enableQuestionModule == -1)) {
      this.$routerGo(this, "replace", {
        path: "/error/emptyPage",
        query: {
          info: "问答已下架"
        }
      });
    }
    setDocumentTitle("问题详情");// eslint-disable-line
    this.isWeiXin = utilJs.isWeiXin();
    curPlayLocalId = ""; //当前播放本地音频ID
    currentLocalId = ""; //当前录制本地音频ID
    this.uploadVideoList = [];
    isPlayTest = false; //是否试听
    curAswQuestionDetailId = ""; //当前回答问题ID
    audioServerId = ""; //音频serverId
    uploader = null;
    this.msg = '';
    this.allInfo = {};
    this.showProgress = false;
    this.isPlayingAudio = false;
    this.isUpoloadVideo = false;
    this.videoMp4 = "";
    this.questionInfo = {};
    this.answerInfo = {};
    this.uploadProgress = '0';
    this.isReply = 0;
    this.modifyPrice = "";
    this.isShowMask = false;
    this.initData();
    this.isShowPf = true;
    this.currentVideoObj = {};

    //解决ios播放没声音
    try {
      document.addEventListener(
        "WeixinJSBridgeReady",
        function () {
          document.getElementById("audio").play();
        },
        false
      );
      WeixinJSBridge.invoke('getNetworkType', {}, function (e) {// eslint-disable-line
        // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
        // document.getElementById("audio").play();
      });
    } catch (error) {
      // continue regardless of error
    }

    // this.getQuestionIfno();
    //获取阿里云签名，除了微信浏览器以外
    if (!utilJs.isWeiXin()) {
      utilJs.getAliSign(`${global.apiurl}imageSign`, res => {
        imgData = res;
      });
      utilJs.getMethod(global.apiurl + "common/qiniu/uploadToken", res => {
        this.qiniuInfo.qiNiuToken = res;
      });
    }
    this.wechatShare();
    // window.onresize监听页面高度的变化
    if (utilJs.isAdnroidBrower()) {
      window.addEventListener('resize', this.watchResize);
    }
  },
  deactivated() {
    clearInterval(recordTimeCon);
    this.stopListenAudio();
    this.playAduioSrc = "";
    if (document.getElementById("audio")) {
      document.getElementById("audio").src = '';
    }
    if (!this.isWeiXin && record != null) {
      record.recClose();
    }
    if (utilJs.isAdnroidBrower()) {
      window.removeEventListener('resize', this.watchResize);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
textarea {
  font-size: 0.6rem;
  outline: none;
  border: none;
  background: none;
  -webkit-appearance: none;
  resize: none;
}
.modal-textarea textarea:focus {
  outline: none;
}

.modal-textarea textarea::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #ccc;
}
.upload-img-del {
  position: absolute;
  right: -0.35rem;
  top: -0.25rem;
}
.fs128 {
  font-size: 3.2rem;
}
.ww240{
  width: 6rem;
}
.ww268{
  width: 6.7rem;
}
.fc-lgreen {
  color: #6DDC73;
}
.bg-green {
  background: #6DDD73;
}
.pr100 {
  padding-right: 2.5rem;
}
.bg-lgreen {
  background: #30b656;
}
.bg-lblue {
  background: linear-gradient(180deg,#f5f7fa 45%, #ffffff 100%);
}
.fc-dblue {
  color: #436AB0;
}
.mh8 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.p-t40 {
  top: 0.4rem;
}
.fs96 {
  font-size: 2.4rem;
}
.c-box-shadow {
  box-shadow: 0px 4px 15px 4px rgba(0,0,0,0.05);
}
.line {
  width: 0.3rem;
  height: 0.05rem;
  transform: rotate(90deg);
}
.masker {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.bg-fa {
  background: #fafafa;
}
.thumbnail:nth-child(3n + 2) {
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}
.c-bd1-e6 {
  border: 1px solid #e6e6e6;
}
.boxThemeItem {
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
}
.borderL::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.1rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  border-radius: .05rem;
  background: var(--rgbcolor);
  content: "";
}
.c-fc-f6 {
  color: #f6f6f6;
}
/* 输入框placeholder的样式 */
.inputArea::-webkit-input-placeholder {
  color: #ccc;
  font-size: 0.6rem;
  line-height: 0.85rem;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

.inputArea::-moz-placeholder {
  color: #ccc;
  font-size: 0.6rem;
  line-height: 0.85rem;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

.inputArea:-ms-input-placeholder {
  color: #ccc;
  font-size: 0.6rem;
  line-height: 0.85rem;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

.inputArea::placeholder {
  color: #ccc;
  font-size: 0.6rem;
  line-height: 0.85rem;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}
.fc-D5D8DE {
  color: #D5D8DE;
}
.pv168{padding-top: 4.2rem; padding-bottom: 4.2rem;}
.iconBox {
  border: 1px solid #FF5D3D;
  background-color: rgba(255, 93, 61, 0.1);
}
</style>


